<template>
    <div class="playMusic">
        <h2>正在播放:{{}}</h2>
        <div class="play_contain" :style="{backgroundImage:`url(${bgimg})`}">
            <div class="player_con" >
              <!-- 播放触杆 -->
              <img src="../assets/images/player_bar.png" class="play_bar" :class="isplay? 'playing':''"/>
              <!-- 黑胶碟片 -->
              <img src="../assets/images/disc.png" class="disc autoRotate" :class="isplay? 'playing':''"/>
              <!-- 歌曲封面 -->
              <img  class="cover autoRotate" :style="{backgroundImage:`url(${bgimg})`}" :class="isplay? 'playing':''"/>
            </div>
            <!--展示歌词
             <div class="lycbox" ref="lyric">
                <div class="lycontent">
                  <p></p>
                </div>
                <div>
                  暂无歌词
                </div>
            </div> -->
        </div>
        <div class="play_footer">
            <audio :src="playsrc" controls autoplay="true" class="myplay" @play="playing" @pause="topause"></audio>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { reactive, ref } from "@vue/reactivity";
import {getMusicUrl} from "@/http/music"
//音乐播放地址
let playsrc = ref('');
//播放背景图片
let bgimg = ref('')
//判断歌曲是否播放状态
let isplay = ref(true)
const Route = useRoute();
onMounted(()=>{
    console.log(Route.query.id);
    getMuscSrc();
    getBgimg()
});
onBeforeRouteUpdate( async(to,from,next)=>{
    let res = await getMusicUrl(to.query.id)
    playsrc.value = await res.data.data[0].url
    let obj = await getImage(to.query.aid);
    bgimg.value =  `${obj.data.album.picUrl}`
    next();
})
//播放音乐
const getMuscSrc = async()=>{
    let res = await getMusicUrl(Route.query.id)
    console.log(res);
    playsrc.value = await res.data.data[0].url 
}
//歌曲播放中
const playing = ()=>{
   isplay.value = true
}
//歌曲暂停
const topause = ()=>{
    isplay.value = false
}
//获取歌曲封面
import {getImage} from '@/http/music'
const getBgimg = async()=>{
    let res = await getImage(Route.query.aid);
    bgimg.value =  `${res.data.album.picUrl}`
    console.log('拿到的数据：',res); 
}
</script>

<style scoped>
.playMusic {
    margin: 0 auto;
    width: 80%;
    height: 800px;
    background-color: blueviolet;
    overflow: hidden;
}
.myplay {
    margin: 0 auto;
    width: 80%;
    height: 50px;
}
.play_contain {
    width: 80%;
    height: 450px;
    margin: 5px auto;
    border-radius: 100px;
    background-color: rgb(194, 240, 241.4);
}
.player_con {
      width: 400px;
      height: 435px;
      position: relative;
    }

    .disc {
      position: absolute;
      left: 324px;
      top: 80px;
      z-index: 9;
    }

    .cover {
      position: absolute;
      left: 376px;
      top: 132px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      z-index: 8;
    }
    /* 是否正在播放 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }
      to {
        transform: rotateZ(360deg);
      }
    }

    /* 旋转的类名 */
    .autoRotate {
      animation-name: Rotate;
      animation-iteration-count: infinite;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-duration: 5s;
    }
    .playing {
      animation-play-state: running;
    }

    .play_bar {
      position: absolute;
      left: 435px;
      top: -8px;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: 12px 12px;
      transition: 1s;
    }

    /* 播放杆 转回去 */
    .play_bar.playing {
      transform: rotate(0);
    }
    .list-item {
      display: inline-block;
      margin-right: 10px;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }
    .lycontent {
        background-color: #d490c3;
        height: auto;
    }
    
</style>